page {
	height: 100%;
	background-color: #f9f9f9;
	font-size: 28rpx;
}

.app-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.flex {
	display: flex;
}

.justify-around {
	justify-content: space-around;
}

.justify-between {
	justify-content: space-between;
}

.text-primary {
	color: $u-primary;
}

.flex-1 {
	flex: 1;
}

.text-success {
	color: $u-success;
}

.gap-20 {
	gap: 20rpx;
}

.gap-40 {
	gap: 40rpx;
}

.p-40 {
	padding: 40rpx;
}

.p-20 {
	padding: 20rpx;
}

.pb-20 {
	padding-bottom: 20rpx;
}

.pt-20 {
	padding-top: 20rpx;
}

.px-40 {
	padding: 0 40rpx;
}

.py-20 {
	padding: 20rpx 0;
}

.my-button {
	border-radius: 30rpx;
	padding: 5rpx 30rpx;
	background-color: #ffffff;
	box-shadow: 0 2rpx 5rpx 1rpx rgba(0, 0, 0, 0.1);
}

.m-40 {
	margin: 40rpx;
}

.bg-white {
	background-color: #ffffff;
}

.mt-20 {
	margin-top: 20rpx;
}

.mb-20 {
	margin-bottom: 20rpx;
}

.bold {
	font-weight: bold;
}

.justify-end {
	justify-content: flex-end;
}

.flex-wrap {
	flex-wrap: wrap;
}

.text-center {
	text-align: center;
}

.flex-column {
	flex-direction: column;
}

.my-card {
	padding: 20rpx;
	border-radius: 10rpx;
	background-color: #ffffff;
}

.text-info {
	color: $u-info;
}

.text-white {
	color: #ffffff;
}

.justify-center {
	justify-content: center;
}

.items-center {
	align-items: center;
}

.text-error {
	color: $u-error;
}

.ml-20 {
	margin-left: 20rpx;
}

.ml-10 {
	margin-left: 20rpx;
}

.py-40 {
	padding: 40rpx 0;
}

.mt-40 {
	margin-top: 40rpx;
}

.mb-10 {
	margin-bottom: 10rpx;
}

.active-scale {
	transition: all .4s;
	&:active{
		transform: scale(.8);
	}
}